<template>
  <a-form-model-item v-show="showLabel(formItem)" :key="formItem.model" :label="formItem.label" :prop="formItem.model" :rules="rules[formItem.model]">
    <div v-if="!modalFnData[formItem.model]" class="div_text" :class="formItem.divStyle">{{ showText(formItem, activeEnumList) }} </div>
    <a-input
      v-show="modalFnData[formItem.model]"
      v-if="formItem.compTag === 'text'"
      v-model="modalForm[`${formItem.model}`]"
      :prefix="formItem.prefix"
      :suffix="formItem.suffix"
      :addon-before="formItem.addonBefore"
      :addon-after="formItem.addonAfter"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      @change="onInputChange(formItem)"
      @pressEnter="onInputPressEnter(formItem)"
    ></a-input>
    <a-input
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'textIcon'"
      v-model="modalForm[`${formItem.model}`]"
      :prefix="formItem.prefix"
      :suffix="formItem.suffix"
      :addon-before="formItem.addonBefore"
      :addon-after="formItem.addonAfter"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      @change="onInputChange(formItem)"
      @pressEnter="onInputPressEnter(formItem)"
      :defaultValue="formItem.defVal"
    >
      <a-icon v-if="formItem.prefixIcon !== undefined" slot="prefix" :type="formItem.prefixIcon" />
      <a-icon v-if="formItem.suffixIcon !== undefined" slot="suffix" :type="formItem.suffixIcon" />
      <a-icon v-if="formItem.addonBeforeIcon !== undefined" slot="addonBefore" :type="formItem.addonBeforeIcon" />
      <a-tooltip v-if="formItem.tooltipTitle !== undefined" slot="suffix" :title="formItem.tooltipTitle">
        <a-icon v-if="formItem.tooltipIcon !== undefined" :type="formItem.tooltipIcon" style="color: rgba(0,0,0,.45)" />
      </a-tooltip>
      <a-icon v-if="formItem.addonAfterIcon !== undefined" slot="addonAfter" :type="formItem.addonAfterIcon" />
      <a-select
        v-if="formItem.addonBeforeCompItem !== undefined && formItem.addonBeforeCompItem.compTag === 'select'"
        v-show="modalFnData[formItem.addonBeforeCompItem.model]"
        slot="addonBefore"
        v-model="modalForm[`${formItem.addonBeforeCompItem.model}`]"
        style="width: 90px"
        @change="onSelectChange(formItem.addonBeforeCompItem)"
        @select="onSelectSelect(formItem.addonBeforeCompItem)"
        :defaultValue="formItem.defVal"
      >
        <a-select-option v-for="(data, i) in beforeActiveEnumList" :key="data.value">{{ data.text }}</a-select-option>
      </a-select>
      <a-select
        v-if="formItem.addonAfterCompItem !== undefined && formItem.addonAfterCompItem.compTag === 'select'"
        v-show="modalFnData[formItem.addonAfterCompItem.model]"
        slot="addonAfter"
        v-model="modalForm[`${formItem.addonAfterCompItem.model}`]"
        style="width: 80px"
        @change="onSelectChange(formItem.addonAfterCompItem)"
        @select="onSelectSelect(formItem.addonAfterCompItem)"
        :defaultValue="formItem.defVal"
      >
        <a-select-option v-for="(data, i) in afterActiveEnumList" :key="data.value">{{ data.text }}</a-select-option>
      </a-select>
    </a-input>
    <a-input-search
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'inputSearch'"
      v-model="modalForm[`${formItem.model}`]"
      :prefix="formItem.prefix"
      :suffix="formItem.suffix"
      :addon-before="formItem.addonBefore"
      :addon-after="formItem.addonAfter"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      @search="onInputSearch"
    />

    <a-input-search
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'inputSearchButton'"
      v-model="modalForm[`${formItem.model}`]"
      enter-button="查询"
      :prefix="formItem.prefix"
      :suffix="formItem.suffix"
      :addon-before="formItem.addonBefore"
      :addon-after="formItem.addonAfter"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      @search="onInputSearch"
    />
    <a-input-group v-else-if="formItem.compTag === 'inputGroup'" compact>
      <a-select
        v-for="(groupItem,itemIndex) in formItem.groupItems"
        v-show="modalFnData[groupItem.model]"
        v-if="groupItem !== undefined && groupItem.compTag === 'select'"
        :key="groupItem.model"
        :style="groupItem.inputStyle"
        v-model="modalForm[`${groupItem.model}`]"
        allow-clear
        :placeholder="groupItem.placeholder"
        :defaultValue="formItem.defVal"
      >
        <a-select-option v-for="(data, i) in activeEnumData[groupItem.data]" :key="data.value">{{ data.text }}</a-select-option>
      </a-select>
      <a-input
        v-for="(groupItem,itemIndex) in formItem.groupItems"
        v-show="modalFnData[groupItem.model]"
        v-if="groupItem !== undefined && groupItem.compTag === 'text'"
        :key="groupItem.model"
        v-model="modalForm[`${groupItem.model}`]"
        :style="groupItem.inputStyle"
        :prefix="groupItem.prefix"
        :suffix="groupItem.suffix"
        :addon-before="groupItem.addonBefore"
        :addon-after="groupItem.addonAfter"
        allow-clear
        :placeholder="groupItem.placeholder"
        @change="onInputChange(groupItem)"
        @pressEnter="onInputPressEnter(groupItem)"
        :defaultValue="formItem.defVal"
      />
    </a-input-group>
    <a-input-number
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'number'"
      v-model="modalForm[`${formItem.model}`]"
      :formatter="onInputNumberFormatter"
      :parser="onInputNumberParser"
      :min="formItem.min"
      :max="formItem.max"
      :step="formItem.step"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      @change="onInputChange(formItem)"
      @pressEnter="onInputPressEnter(formItem)"
      :defaultValue="formItem.defVal"
    />
    <a-input-number
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'numberPrecision'"
      :formatter="onInputNumberFormatter"
      v-model="modalForm[`${formItem.model}`]"
      :parser="onInputNumberParser"
      :min="formItem.min"
      :max="formItem.max"
      :step="formItem.step"
      :precision="formItem.precision"
      :decimal-separator="formItem.decimalSeparator"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      @change="onInputChange(formItem)"
      @pressEnter="onInputPressEnter(formItem)"
      :defaultValue="formItem.defVal"
    />

    <a-auto-complete
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'autoComplete'"
      :data-source="LazyAutoCompleteDataSource"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      @change="onAutoCompleteSearch"
    />
    <a-textarea
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'textarea'"
      v-model="modalForm[`${formItem.model}`]"
      :rows="formItem.rows"
      :cols="formItem.cols"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      :defaultValue="formItem.defVal"
    />
    <a-input-password
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'password'"
      v-model="modalForm[`${formItem.model}`]"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      @pressEnter="onInputPressEnter(formItem)" />
    <a-date-picker
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'datepicker'"
      :input-read-only="formItem.inputReadOnly"
      v-model="modalForm[`${formItem.model}`]"
      :show-today="formItem.showToday"
      :show-time="formItem.showTime"
      :format="formItem.format"
      :value-format="formItem.format"
      :disabled-date="onDatePickerDisabledDate"
      :disabled-time="onDatePickerDisabledTime"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      :defaultValue="formItem.defVal"
    />
    <a-date-picker
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'datetimepicker'"
      v-model="modalForm[`${formItem.model}`]"
      show-time
      :style="formItem.inputStyle"
      allow-clear
      :format="timeFormat"
      :value-format="timeFormat"
      :placeholder="formItem.placeholder"
      :defaultValue="formItem.defVal"
    />
    <a-date-picker
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'yearpicker'"
      v-model="modalForm[`${formItem.model}`]"
      :disabled-date="onDatePickerDisabledYear"
      format="YYYY"
      value-format="YYYY-MM"
      mode="year"
      :open="yearShowOne"
      :style="formItem.inputStyle"
      allow-clear
      @panelChange="panelChangeOne"
      @openChange="openChangeOne"
      :defaultValue="formItem.defVal"
    />
    <a-month-picker
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'monthpicker'"
      v-model="modalForm[`${formItem.model}`]"
      format="YYYY-MM"
      value-format="YYYY-MM"
      :disabled-date="onMonthPickerDisabledMonth"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      :defaultValue="formItem.defVal"
    />
    <a-week-picker
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'weekpicker'"
      v-model="modalForm[`${formItem.model}`]"
      format="YYYY-wo"
      value-format="YYYY-wo"
      :disabled-date="onWeekPickerDisabledWeek"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      :defaultValue="formItem.defVal"
    />
    <a-range-picker
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'rangepicker'"
      v-model="modalForm[`${formItem.model}`]"
      :ranges="targetRangePickerRanges"
      :disabled-date="onRangePickerDisabledDate"
      :style="formItem.inputStyle"
      allow-clear
      :format="dateFormat"
      :value-format="dateFormat"
    />
    <a-range-picker
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'rangedatetimepicker'"
      v-model="modalForm[`${formItem.model}`]"
      show-time
      :ranges="targetRangePickerRanges"
      :disabled-date="onRangePickerDisabledDate"
      :disabled-hours="onTimeDisabledHours"
      :disabled-minutes="onTimeDisabledMinutes"
      :disabled-seconds="onTimeDisabledSeconds"
      :style="formItem.inputStyle"
      allow-clear
      :format="timeFormat"
      :value-format="timeFormat"
    />
    <a-time-picker
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'secondpicker'"
      format="HH:mm:ss"
      v-model="modalForm[`${formItem.model}`]"
      value-format="HH:mm:ss"
      :use12-hours="formItem.use12Hours"
      :hour-step="formItem.hourStep"
      :minute-step="formItem.minuteStep"
      :second-step="formItem.secondStep"
      :disabled-hours="onTimeDisabledHours"
      :disabled-minutes="onTimeDisabledMinutes"
      :disabled-seconds="onTimeDisabledSeconds"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
    />
    <a-time-picker
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'minutepicker'"
      v-model="modalForm[`${formItem.model}`]"
      format="HH:mm"
      value-format="HH:mm"
      :use12-hours="formItem.use12Hours"
      :hour-step="formItem.hourStep"
      :minute-step="formItem.minuteStep"
      :disabled-hours="onTimeDisabledHours"
      :disabled-minutes="onTimeDisabledMinutes"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
    />
    <a-time-picker
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'hourpicker'"
      v-model="modalForm[`${formItem.model}`]"
      format="HH"
      value-format="HH"
      :use12-hours="formItem.use12Hours"
      :hour-step="formItem.hourStep"
      :disabled-hours="onTimeDisabledHours"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
    />
    <a-rate
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'rate'"
      v-model="modalForm[`${formItem.model}`]"
      :character="formItem.character"
      :count="formItem.count"
      :allow-half="formItem.allowHalf"
      :tooltips="formItem.tooltips"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      :defaultValue="formItem.defVal"
    />
    <a-rate
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'rateIcon'"
      v-model="modalForm[`${formItem.model}`]"
      :count="formItem.count"
      :allow-half="formItem.allowHalf"
      :tooltips="formItem.tooltips"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      :defaultValue="formItem.defVal"
    >
      <a-icon slot="character" :type="formItem.character" />
    </a-rate>
    <a-slider
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'slider'"
      :tip-formatter="changeSliderFormatter"
      :min="formItem.min"
      :max="formItem.max"
      :step="formItem.step"
      v-model="modalForm[`${formItem.model}`]"
      :dots="formItem.dots"
      :included="formItem.included"
      :reverse="formItem.reverse"
      :vertical="formItem.vertical"
      :range="formItem.range"
      :tooltip-visible="formItem.tooltipVisible"
      :tooltip-placement="formItem.tooltipPlacement"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      :defaultValue="formItem.defVal"
    />
    <a-switch
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'switch'"
      v-model="modalForm[`${formItem.model}`]"
      checked-children="开"
      un-checked-children="关"
      default-checked
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
    />
    <a-switch
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'switchIcon'"
      v-model="modalForm[`${formItem.model}`]"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      :defaultValue="formItem.defVal"
    >
      <a-icon slot="checkedChildren" type="check" />
      <a-icon slot="unCheckedChildren" type="close" />
    </a-switch>

    <a-checkbox-group v-show="modalFnData[formItem.model]" v-else-if="formItem.compTag === 'headCheckbox'" v-model="modalForm[`${formItem.model}`]" allow-clear :style="inputStyle" :placeholder="formItem.placeholder" :change="onChangeCheckedList" :options="activeEnumList" @change="onChangeCheckedList(formItem)" />
    <a-checkbox-group v-show="modalFnData[formItem.model]" v-else-if="formItem.compTag === 'biCheckbox'" v-model="modalForm[`${formItem.model}`]" allow-clear :style="inputStyle" :placeholder="formItem.placeholder" :change="onChangeCheckedList" :options="activeEnumList" @change="onChangeCheckedList(formItem)" />
    <a-checkbox-group v-show="modalFnData[formItem.model]" v-else-if="formItem.compTag === 'checkbox'" v-model="modalForm[`${formItem.model}`]" allow-clear :style="inputStyle" :placeholder="formItem.placeholder" :change="onChangeCheckedList" :options="activeEnumList" @change="onChangeCheckedList" />

    <a-mentions v-show="modalFnData[formItem.model]" v-else-if="formItem.compTag === 'mentions'" v-model="modalForm[`${formItem.model}`]" allow-clear
                :style="formItem.inputStyle"
                :placeholder="formItem.placeholder" @change="onMentionsChange" @select="onMentionsSelect">
      <a-mentions-option v-for="(data, i) in activeEnumList" :key="data.value" :value="data.value">{{ data.text }}</a-mentions-option>
    </a-mentions>
    <a-mentions
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'mentionsSearch'"
      v-model="modalForm[`${formItem.model}`]"
      :loading="mentionsSearchLoading"
      allow-clear
      :style="formItem.inputStyle"
      :placeholder="formItem.placeholder"
      @change="onMentionsChange"
      @select="onMentionsSelect"
      @search="onMentionsSearch"
    >
      <a-mentions-option v-for="(data, i) in LazyMentionsOptions" :key="data.value" :value="data.value">{{ data.text }}</a-mentions-option>
    </a-mentions>
    <a-cascader
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'cascader'"
      v-model="modalForm[`${formItem.model}`]"
      :show-search="{ filterCascaderOption }"
      :options="activeEnumList"
      allow-clear
      :style="formItem.inputStyle"
      :placeholder="formItem.placeholder"
      @change="onCascaderChange"
      :defaultValue="formItem.defVal"
    />

    <a-cascader
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'cascaderSearch'"
      v-model="modalForm[`${formItem.model}`]"
      :load-data="onCascaderSearch"
      change-on-select
      :options="LazyCascaderoptions"
      allow-clear
      :style="formItem.inputStyle"
      :placeholder="formItem.placeholder"
      @change="onCascaderChange"
    />

    <a-tree-select
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'treeSelect'"
      v-model="modalForm[`${formItem.model}`]"
      :tree-data="activeEnumList"
      allow-clear
      :placeholder="formItem.placeholder"
      :style="formItem.inputStyle"
      show-search
      tree-node-filter-prop="label"
      tree-node-label-prop="label"
      tree-default-expand-all
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      @change="onTreeChange"
      @select="onTreeSelect"
      :defaultValue="formItem.defVal"
    />

    <a-tree-select
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'treeSearch'"
      v-model="modalForm[`${formItem.model}`]"
      :tree-data="LazyTreeoptions"
      allow-clear
      :placeholder="formItem.placeholder"
      :style="formItem.inputStyle"
      tree-default-expand-all
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      :load-data="onTreeSearch"
      @change="onTreeChange"
      @select="onTreeSelect"
      :defaultValue="formItem.defVal"
    />
    <a-select
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'select'"
      v-model="modalForm[`${formItem.model}`]"
      :max-tag-count="formItem.maxTagCount"
      :max-tag-text-length="formItem.maxTagTextLength"
      :show-arrow="formItem.showArrow"
      :show-search="formItem.showSearch"
      :mode="formItem.mutil"
      :filter-option="filterSelectOption"
      :not-found-content="formItem.notFoundContent"
      allow-clear
      :style="formItem.inputStyle"
      :placeholder="formItem.placeholder"
      @change="onSelectChange(formItem)"
      @select="onSelectSelect(formItem)"
    >
      <a-select-option v-for="(data, i) in activeEnumList" :key="data.value">{{ data.text }}</a-select-option>
    </a-select>
    <a-select
      v-show="modalFnData[formItem.model]"
      v-else-if="formItem.compTag === 'selectSearch'"
      v-model="modalForm[`${formItem.model}`]"
      :style="formItem.inputStyle"
      allow-clear
      label-in-value
      :max-tag-count="formItem.maxTagCount"
      :max-tag-text-length="formItem.maxTagTextLength"
      :show-arrow="formItem.showArrow"
      show-search
      :mode="formItem.mutil"
      :placeholder="formItem.placeholder"
      :filter-option="false"
      :not-found-content="formItem.notFoundContent"
      @search="selectSearch"
      @change="onSelectChange(formItem)"
      :defaultValue="formItem.defVal"
    >
      <a-spin v-show="modalFnData[formItem.model]" v-if="fetching" slot="notFoundContent" allow-clear size="small" />
      <a-select-option v-for="(d, i) in activeEnumList" :key="d.value">
        {{ d.text }}
      </a-select-option>
    </a-select>
    <a-radio-group v-show="modalFnData[formItem.model]" v-else-if="formItem.compTag === 'radio'" v-model="modalForm[`${formItem.model}`]" :name="formItem.model"
                   :style="formItem.inputStyle"
                   allow-clear :placeholder="formItem.placeholder" @change="onRadioChange"
                   :defaultValue="formItem.defVal"
    >
      <a-radio v-for="(data, i) in activeEnumList" :key="data.value" :value="data.value">{{ data.text }}</a-radio>
    </a-radio-group>
    <a-radio-group v-show="modalFnData[formItem.model]" v-else-if="formItem.compTag === 'radioButton'" v-model="modalForm[`${formItem.model}`]"
                   :style="formItem.inputStyle" allow-clear :placeholder="formItem.placeholder"
                   :defaultValue="formItem.defVal"
    >
      <a-radio-button v-for="(data, i) in activeEnumList" :key="data.value" :value="data.value">{{ data.text }}</a-radio-button>
    </a-radio-group>

    <a-input v-show="modalFnData[formItem.model]"
             v-else-if="formItem.compTag === 'inputSelect'"
             v-model="modalForm[`${formItem.model}`]"
             :style="formItem.inputStyle" read-only allow-clear
             :placeholder="formItem.placeholder" @click="openModal(formItem)"
    >
      <a-icon slot="prefix" type="cluster" title="部门选择控件" />
      <a-icon slot="suffix" type="close-circle" title="清空" @click="clearEmpty(formItem)" />
    </a-input>
    <!--    <div v-else-if="formItem.compTag === 'inputButton'" style="width:100%;">-->
    <!-- width: calc(100% - 64px); -->
    <a-input-search
      v-else-if="formItem.compTag === 'inputButton'"
      v-show="modalFnData[formItem.model]"
      v-model="modalForm[`${formItem.model}`]"
      :style="formItem.inputStyle"
      allow-clear
      :placeholder="formItem.placeholder"
      enter-button="选择"
      size="default"
      @search="openModal(formItem)"
    />
    <div v-else-if="formItem.compTag === 'uploadFile'" style="display: flex;width:100%;">
      <a-upload
        v-show="modalFnData[formItem.model]"
        v-model="modalForm[`${formItem.model}`]"
        :accept="formItem.accept"
        name="file"
        :show-upload-list="false"
        :multiple="false"
        :headers="tokenHeader"
        :data="modalForm"
        :custom-request="uploadCustomRequest"
      >
        <a-button @click="btnOnClick(formItem)"> <a-icon type="upload" />{{ formItem.label }}</a-button>
      </a-upload>&nbsp;&nbsp;
      <span>
        <a-popover
          v-for="(data) in fileList"
          :key="data.value"
          :title="data.text"
          :visible="data.parentValue"
          trigger="hover"
          @visibleChange="handleHoverChange"
        >
          <div slot="content">
              &nbsp;&nbsp;&nbsp;&nbsp;
            <a v-if="data.extValue.downAuth === 1" @click="downloadUploadFile(data)">下载</a>
            <a v-if="data.extValue.downAuth === 2" @click="downloadUploadFile(data)">无下载权限</a>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a v-if="data.extValue.delAuth === 1" @click="deleteUploadFile(data)">删除</a>
          </div>
          <a-tag
            :key="data.value"
            @click="clickTag(data)"
          >{{ data.text }}</a-tag>
        </a-popover>
      </span>
    </div>

    <div v-else-if="formItem.compTag === 'vditor'" id="vditor" />

    <div v-else-if="formItem.compTag === 'vditor0'">
      <tinymce v-model="content" :height="300" />
      <div class="editor-content" v-html="content" />
    </div>

    <a-input v-show="modalFnData[formItem.model]" v-else v-model="modalForm[`${formItem.model}`]" allow-clear
             :style="formItem.inputStyle" :type="formItem.type" :placeholder="formItem.placeholder" />
  </a-form-model-item>
</template>
<script>
import { submitDealReq, getToken, getDefFormatVal, evil } from '@/utils/auth'
import { getFnInputParam } from '@/utils/hyurl'
import request from '@/utils/request'
// ant-design-vue/dist/
import Tinymce from '@/components/Tinymce'
import Vditor from 'vditor'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
export default {
  name: 'InputTplUi',
  components: { Tinymce },
  props: ['activeEnumData', 'formItem', 'activeEnumList', 'paramData', 'uiPageUrl', 'initSrcLabel', 'openParam', 'inputStyle', 'modalFnData', 'modalForm', 'rules', 'formEvent', 'beforeFormItem', 'afterFormItem'],
  data() {
    return {
      options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          isLeaf: false
        }, {
          value: 'zhejiang01',
          label: 'Zhejiang01',
          isLeaf: false
        }],
      // options: options,
      contentEditor: {},
      menuItem: {},
      nowData: {},
      tagClose: true,
      fileTag: {},
      clicked: false,
      hovered: false,
      accept: 'image/png,image/jpg,video/mp4,txt,doc,docx,ppt,pptx',
      fileList: [],
      showUploadList: false,
      openFileDialogOnClick: true,
      // uploading: false,
      tokenHeader: { 'Authorization': 'bearer ' + getToken() },
      importBaseUrl: '/autodeal/file/ctr',
      importExcelUrl: '/autodeal/file/ctr/upload',
      // paramData: { 'pkRefId': '1', 'pkSubId': '212' },
      // inputStyle: 'width: 260px',

      timeFormat: 'YYYY-MM-DD HH:mm:ss',
      minutesFormat: 'YYYY-MM-DD HH:mm',
      hoursFormat: 'YYYY-MM-DD HH',
      dateFormat: 'YYYY-MM-DD',
      monthFormat: 'YYYY-MM',
      yearFormat: 'YYYY',
      yearShowOne: false,
      LazyCascaderoptions: [],
      targetCascaderOption: {},
      LazyTreeoptions: [],
      targetTreeOption: {},
      LazyMentionsOptions: [],
      LazyAutoCompleteDataSource: [],
      mentionsSearchLoading: false,
      targetRangePickerRanges: { 今天: [moment().startOf('day'), moment()],
        明天: [moment().startOf('day').subtract(-1, 'days'), moment().endOf('day').subtract(-1, 'days')],
        昨天: [moment().startOf('day').subtract(1, 'days'), moment().endOf('day').subtract(1, 'days')],
        最近三天: [moment().startOf('day').subtract(2, 'days'), moment().endOf('day')],
        最近一周: [moment().startOf('day').subtract(1, 'weeks'), moment()],
        本月: [moment().startOf('month'), moment()],
        本年: [moment().startOf('year'), moment()] },
      beforeActiveEnumList: [],
      afterActiveEnumList: [],
      data: [],
      value: [],
      fetching: false,
      activeEnumTmpData: {},
      validatorCommRules: {
        S_COMMON_RULE: {
          rules: [{
            required: false
          }]
        }
      }
    }
  },
  watch: {
    activeEnumData(val) {
      if (this.formItem.addonBeforeCompItem !== undefined && this.formItem.addonBeforeCompItem.compTag === 'select') {
        this.beforeActiveEnumList = val[this.formItem.addonBeforeCompItem.model]
      }
      if (this.formItem.addonAfterCompItem !== undefined && this.formItem.addonAfterCompItem.compTag === 'select') {
        this.afterActiveEnumList = val[this.formItem.addonAfterCompItem.model]
      }
    },
    beforeActiveEnumList(val) {
      console.log('beforeActiveEnumList', val)
    },
    activeEnumList(val) {
      if (this.formItem.compTag === 'uploadFile') {
        const tmpList = val
        for (const key in tmpList) {
          const tmp = tmpList[key]
          if (this.initSrcLabel === 'detail') {
            if (tmp.extValue !== undefined) {
              tmp.extValue.delAuth = 2
            }
          }
        }
        this.fileList = Object.assign([], tmpList)
      }
      this.fetching = false
      if (this.formItem.compTag === 'cascaderSearch') {
        if (this.targetCascaderOption.loading !== undefined) {
          this.targetCascaderOption.loading = false
          this.targetCascaderOption.children = val
          this.LazyCascaderoptions = [...this.LazyCascaderoptions]
        } else {
          this.LazyCascaderoptions = val
        }
      } else if (this.formItem.compTag === 'treeSearch') {
        if (this.targetTreeOption.loading !== undefined) {
          this.targetTreeOption.loading = false
          this.targetTreeOption.children = val
          this.LazyTreeoptions = [...this.LazyTreeoptions]
        } else {
          this.LazyTreeoptions = val
        }
      } else if (this.formItem.compTag === 'mentionsSearch') {
        if (this.mentionsSearchLoading !== undefined) {
          this.mentionsSearchLoading = false
          this.LazyMentionsOptions = val
          this.LazyMentionsOptions = [...this.LazyMentionsOptions]
        } else {
          this.LazyMentionsOptions = val
        }
      } else if (this.formItem.compTag === 'autoComplete') {
        this.LazyAutoCompleteDataSource = []
        const tmpList = val
        for (const key in tmpList) {
          const tmp = tmpList[key]
          this.LazyAutoCompleteDataSource.push(tmp.label)
        }
      }
    },
    // activeEnumData(val) {
    //   this.activeEnumTmpData = Object.assign({}, this.activeEnumData)
    //   if (this.formItem.compTag === 'uploadFile') {
    //     const tmpList = this.activeEnumData[this.formItem.data]
    //     for (const key in tmpList) {
    //       const tmp = tmpList[key]
    //       if (this.initSrcLabel === 'detail') {
    //         if (tmp.extValue !== undefined) {
    //           tmp.extValue.delAuth = 2
    //         }
    //       }
    //     }
    //     this.fileList = Object.assign([], tmpList)
    //   }
    // },
    rules(val) {
      // console.log('0modalFnData00', this.modalFnData)
      // console.log('watch ... rules data ', val)
    },
    fileData(val) {
      console.log('file data...', val)
    }
  },
  mounted() {
    if (this.formItem.compTag === 'vditor') {
      console.log('this.....formItem....', this.formItem)
      this.contentEditor = new Vditor('vditor', {
        height: 360,
        toolbarConfig: {
          pin: true
        },
        currentMode: 'wysiwyg',
        mode: 'wysiwyg',
        cache: {
          enable: false
        },
        upload: {
          fieldName: 'file',
          headers: {
            Authorization: 'bearer ' + getToken()
          },
          extraData: this.getUiPageObj(),
          // extraData: { ddfdf: 'dff' , mutilFile: 2},
          withCredentials: true,
          accept: 'image/*,.mp3, .wav, .rar',
          url: '/autodeal/file/ctr/upload?mutilFile=2',
          // linkToImgUrl: '1',
          filename(name) {
            return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '')
          },
          format(files, responseText) {
            // "filename3": "filepath3",
            console.log(files, responseText)

            // const tmpfile = {}
            // console.log('dfsfsd data',data)
            // console.log('dfsfsd ccc',ccc)
            // const fileListLength = ccc.fileList.length
            // for (let i = 0; i < fileListLength; i++) {
            //   const file = ccc.fileList[i]
            //   tmpfile[file.name] = file.url
            // }
            //
            const obj = {}
            obj.msg = 'o'
            obj.code = '0'

            const tmpObj = {}
            tmpObj.errFiles = []
            tmpObj.succMap = { '测试': 'http://localhost:8301/autodeal/file/ctr/view/7843784687633.png' }
            obj.data = tmpObj
            return JSON.stringify(obj)
          }
        },
        after: () => {
          this.contentEditor.setValue('hello,Vditor+Vue!')
        }
      })
      const value = this.contentEditor.getValue()
      console.log('value........',value)
    }
  },
  created() {
    // window.downloadFile = this.downloadFile
  },
  methods: {
    onInputNumberFormatter(value) {
      if (this.formItem.prefix !== undefined || this.formItem.suffix !== undefined) {
        let tmpVal
        if (this.formItem.prefix !== undefined) {
          tmpVal = this.formItem.prefix
        }
        tmpVal = tmpVal + value
        if (this.formItem.suffix !== undefined) {
          tmpVal = tmpVal + this.formItem.suffix
        }
        value = tmpVal
        return value
      }
      return value
    },
    onInputNumberParser(value) {
      if (this.formItem.prefix !== undefined || this.formItem.suffix !== undefined) {
        let parser
        if (this.formItem.prefix !== undefined) {
          // 样例数据# let tmp = /\￥\s?|(,*)/g
          parser = '/\\' + this.formItem.prefix + '\\s?|(,*)/g'
          parser = evil(parser)
          value = value.replace(parser, '')
          const prefixSplit = this.formItem.prefix.split('')
          for (const i in prefixSplit) {
            value = value.replace(prefixSplit[i], '')
          }
        }
        if (this.formItem.suffix !== undefined) {
          parser = this.formItem.suffix
          value = value.replace(parser, '')
          const suffixSplit = this.formItem.suffix.split('')
          for (const i in suffixSplit) {
            value = value.replace(suffixSplit[i], '')
          }
        }
        return value
      } else {
        return value
      }
    },
    onDatePickerDisabledYear(current) {
      return current > moment().subtract(-2, 'years') || current < moment().subtract(2, 'years')
    },
    onMonthPickerDisabledMonth(current) {
      console.log('moment().subtract', moment().subtract(-2, 'months'))
      return current > moment().subtract(-2, 'months') || current < moment().subtract(2, 'months')
    },
    onWeekPickerDisabledWeek(current) {
      console.log('moment().subtract', moment().subtract(-2, 'weeks'))
      return current > moment().subtract(-2, 'weeks') || current < moment().subtract(2, 'weeks')
    },
    onDatePickerDisabledDate(current) {
      console.log('moment().subtract', moment().subtract(-2, 'hours'))
      return current > moment().subtract(-2, 'days') || current < moment().subtract(10, 'days')
    },
    onDatePickerDisabledTime(current) {
      console.log('onDatePickerDisabledTime hours', moment().hours(0))
      console.log('onDatePickerDisabledTime', moment().subtract(10, 'hours'))
      return {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [55, 56]
      }
    },
    onRangePickerDisabledDate(current) {
      console.log('moment().subtract', moment().subtract(-2, 'hours'))
      return current > moment().subtract(-2, 'days') || current < moment().subtract(100, 'days')
    },
    onTimeDisabledHours() {
      const hours111 = moment().hours()
      console.log('onDatePickerDisabledTime now hours', hours111)
      const hours = []
      const disabledHours = this.formItem.disabledHours
      console.log('this.formItem.disabledHours', this.formItem.disabledHours)
      if (this.formItem.disabledHours !== undefined) {
        const disabledHoursArr = disabledHours.split(',')
        for (let i = 0; i < disabledHoursArr.length; i++) {
          hours.push(parseInt(disabledHoursArr[i]))
        }
      }
      return hours
    },
    onTimeDisabledMinutes(selectedHour) {
      console.log('onTimeDisabledMinutes', selectedHour)
      const minutes = []
      const disabledMinutes = this.formItem.disabledMinutes
      console.log('this.formItem.disabledMinutes', this.formItem.disabledMinutes)
      if (this.formItem.disabledHours !== undefined) {
        const disabledMinutesArr = disabledMinutes.split(',')
        for (let i = 0; i < disabledMinutesArr.length; i++) {
          minutes.push(parseInt(disabledMinutesArr[i]))
        }
      }
      return minutes
    },
    onTimeDisabledSeconds(selectedHour, selectedMinute) {
      console.log('disabledSeconds', selectedMinute)
      const seconds = []
      const disabledSeconds = this.formItem.disabledSeconds
      console.log('this.formItem.disabledSeconds', this.formItem.disabledSeconds)
      if (this.formItem.disabledSeconds !== undefined) {
        const disabledSecondsArr = disabledSeconds.split(',')
        for (let i = 0; i < disabledSecondsArr.length; i++) {
          seconds.push(parseInt(disabledSecondsArr[i]))
        }
      }
      return seconds
    },
    filterCascaderOption(inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },
    filterSelectOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) !== -1
      )
    },
    changeSliderFormatter(value) {
      const tipFormatter = this.formItem.tipFormatter
      const tmpVal = {}
      tmpVal.value = value
      const tips = getDefFormatVal(tipFormatter, tmpVal)
      return tips
    },
    openChangeOne(status) {
      if (status) {
        this.yearShowOne = true
      }
    },
    panelChangeOne(value) {
      this.yearShowOne = false
      this.modalForm[this.formItem.model] = value.format('YYYY')
    },
    clickTag(data) {
      const thisObj = this
      this.nowData = data
      for (const key in thisObj.fileList) {
        const tmp = thisObj.fileList[key]
        if (data.value !== tmp.value) {
          tmp.parentValue = false
        }
      }
      data.parentValue = true
    },

    handleHoverChange(visible) {
      this.nowData.parentValue = visible
    },
    btnOnClick(formItem) {
      this.menuItem = formItem
    },
    getUiPageObj(formItem) {
      const thisObj = this
      const clickBtn = {}
      clickBtn.btnIdIdx = thisObj.formItem.id
      clickBtn.S_UI_PAGE_ID_IDX_2025 = thisObj.uiPageUrl.S_UI_PAGE_ID_IDX_2025
      clickBtn.S_UI_PAGE_VER_IDX_2025 = thisObj.uiPageUrl.S_UI_PAGE_VER_IDX_2025
      clickBtn.S_UI_PARTITION_2025 = thisObj.uiPageUrl.S_UI_PARTITION_2025
      const inputParam = {}
      inputParam.S_UI_CLICK_BTN_2025 = JSON.stringify(clickBtn)
      return inputParam
    },
    uploadCustomRequest(data) {
      const thisObj = this
      const formData = new FormData()
      const clickBtn = {}
      clickBtn.btnIdIdx = thisObj.formItem.id
      clickBtn.S_UI_PAGE_ID_IDX_2025 = thisObj.uiPageUrl.S_UI_PAGE_ID_IDX_2025
      clickBtn.S_UI_PAGE_VER_IDX_2025 = thisObj.uiPageUrl.S_UI_PAGE_VER_IDX_2025
      clickBtn.S_UI_PARTITION_2025 = thisObj.uiPageUrl.S_UI_PARTITION_2025
      formData.append('file', data.file)
      // const mergeRecord = Object.assign({}, thisObj.openParam, thisObj.paramData, thisObj.modalForm)

      const tplGlobalData = {}
      tplGlobalData.globalParam = Object.assign({}, thisObj.openParam, thisObj.modalForm)
      tplGlobalData.openParam = thisObj.openParam
      tplGlobalData.formModel = thisObj.modalForm
      const inputParam = getFnInputParam(thisObj, tplGlobalData, thisObj.formItem.refSetOpenVal)
      for (const key in inputParam) {
        formData.append(key, inputParam[key])
      }
      const clickBtnStr = JSON.stringify(clickBtn)
      formData.append('S_UI_CLICK_BTN_2025', clickBtnStr)

      console.log('input param,,,', inputParam)
      request.upload('/autodeal/file/ctr/upload', formData).then((res) => {
        /** * **/
        if (res.status === 200) {
          const fileData = res.data.fileList
          const arr = []
          for (const i in fileData) {
            this.$message.success(`${fileData[i].name} file uploaded successfully`)
            const extValue = {}
            extValue.downAuth = 1
            extValue.delAuth = 1
            const param = {}
            param.value = fileData[i].uid
            param.text = fileData[i].name
            param.parentValue = false
            param.extValue = extValue
            if (inputParam !== undefined) {
              if (inputParam.mutilFile === 1) {
                thisObj.fileList = []
              }
            }
            thisObj.fileList.push(param)
          }
          thisObj.fileList = Object.assign([], thisObj.fileList, arr)
        } else {
          this.$message.error(res.statusText)
        }
      })
    },
    execFormShow(formItem) {
    // this.validatorRules.I_FLAG[0].required = false;
    //   this.$emit('changeEvent', formItem)
      const eventKey = formItem.model
      const eventList = this.formEvent[eventKey]
      if (!(undefined === eventList || eventList.length === 0)) {
        formItem.eventList = eventList
      }
      this.$emit('changeEvent', formItem)
    },
    onChangeCheckedList(formItem) {
      formItem.operateEvent = 'change'
      this.execFormShow(formItem)
    },
    onInputChange(formItem) {
      formItem.operateEvent = 'change'
      this.execFormShow(formItem)
    },
    onInputPressEnter(formItem) {
      console.log('onInputPressEnter formItem', formItem)
      console.log('onInputPressEnter e value', this.modalForm[formItem.model])
    },
    onRadioChange(e) {
      console.log('formItem.......', this.formItem)
      // console.log('e')
      this.formItem.operateEvent = 'change'
      this.execFormShow(this.formItem)
      // console.log('onSelectChange formItem', formItem)
      // console.log('onSelectChange e value',  this.modalForm[formItem.model])
    },
    onSelectChange(formItem) {
      if (this.modalForm[formItem.model] === undefined) {
        // 清除时触发
        formItem.operateEvent = 'clear'
        this.execFormShow(formItem)
      }
      // console.log('onSelectChange formItem', formItem)
      // console.log('onSelectChange e value',  this.modalForm[formItem.model])
    },
    onSelectSelect(formItem) {
      console.log('0000onSelectSelect00000000', formItem)
      formItem.operateEvent = 'change'
      this.execFormShow(formItem)
    },
    onTreeSelect(value, node, extra) {
      console.log('onTreeSelect', value)
    },
    onTreeChange(value, node, extra) {
      console.log('onTreeChange', value)
    },
    onCascaderChange(value, selectedOptions) {
      console.log('onCascaderChange', value, selectedOptions)
    },
    onMentionsChange(value) {
      console.log('onMentionsChange.......', value)
    },
    onMentionsSelect(option, prefix) {
      console.log('onMentionsSelect.......', option, prefix)
    },
    showLabel(formItem) {
      return formItem.compTag !== 'hidden'
    },
    showItemTest(formItem) {
      console.log('showItemTest formItem', formItem)
      return false
    },
    showItem(formItem) {
      return this.modalFnData[formItem.model] !== 1
    },
    openModal(formItem) {
      console.log('openModal', formItem)
      this.$emit('changeEvent', formItem)
    },
    clearEmpty(formItem) {
      // this.modalForm[val.model] = ''
      // this.$emit('clearEmpty', val)
      formItem.operateEvent = 'clear'
      this.execFormShow(formItem)
    },
    selectChange(value, option) {
      console.log('selectChange.....', value)
      console.log('selectChange....option.', option)
    },

    showText(formItem, itemEnumList) {
      // console.log('form item',formItem.inputStyle)
      // if (!this.modalFnData[formItem.model]) {
      //   return
      // }
      // if (this.modalFnData[formItem.model] !== 1) {
      // if (!this.modalFnData[formItem.model]) {
      //   return
      // }
      const fieldValue = this.modalForm[formItem.model]
      // let fieldValue = this.modalForm.getFieldValue(formItem.model)
      if (formItem.compTag === 'number' || formItem.compTag === 'text' || formItem.compTag === 'textarea') {
        return fieldValue
      } else if (formItem.compTag === 'datepicker') {
        return moment(fieldValue, this.dateFormat)._i
      } else if (formItem.compTag === 'uploadFile') {
        return ''
      } else if (formItem.compTag === 'treeSelect') {
        console.log('@@@@@@@@@@@@@', formItem)
        if (formItem.ext) {
          if (formItem.ext.div) {
            console.log('######', this.modalForm)
            const title = this.modalForm[formItem.ext.div]
            return title
          }
        }
        return fieldValue
      } else if (formItem.compTag === 'select' || formItem.compTag === 'radio' || formItem.compTag === 'radioButton') {
        if (itemEnumList) {
          // let hasEnum = true
          for (let i = 0; i < itemEnumList.length; i++) {
            const itemEnum = itemEnumList[i]
            if (fieldValue === itemEnum.value) {
              // hasEnum = false
              return itemEnum.text
            }
          }
        }
        return fieldValue
      } else {
        return fieldValue
      }
    },
    onAutoCompleteSearch(value) {
      this.$emit('selectSearch', this.formItem, value)
    },
    onCascaderSearch(selectedOptions) {
      this.targetCascaderOption = selectedOptions[selectedOptions.length - 1]
      const value = this.modalForm[this.formItem.model]
      this.targetCascaderOption.loading = true
      this.$emit('selectSearch', this.formItem, value)
    },
    onTreeSearch(treeNode) {
      const dataRef = treeNode.dataRef
      this.targetTreeOption = dataRef
      this.targetTreeOption.loading = true
      this.$emit('selectSearch', this.formItem, dataRef.value)
      return new Promise(resolve => {
        this.targetTreeOption.loading = false
        resolve()
      })
    },
    onMentionsSearch(value, prefix) {
      const mentionsValue = this.modalForm[this.formItem.model]
      this.mentionsSearchLoading = true
      this.$emit('selectSearch', this.formItem, mentionsValue)
    },
    selectSearch(value) {
      this.fetching = true
      this.$emit('selectSearch', this.formItem, value)
    },
    onInputSearch(value) {
      console.log('inputSearch', value)
      this.$emit('inputSearch', this.formItem, value)
    },
    selectSearchChanage(value) {
      console.log('11111selectSearchChanage1111111', value)
      Object.assign(this, {
        value,
        data: [],
        fetching: false
      })
    },
    deleteUploadFile(record) {
      const thisObj = this
      const newEnumList = []
      const _this = this
      // 下载上传文件
      const url = '/file/ctr/delete/' + record.value
      record.url = url
      _this.confirmLoading = true
      submitDealReq(record).then((res) => {
        _this.confirmLoading = false
        for (const key in thisObj.fileList) {
          const tmp = thisObj.fileList[key]
          if (record.value !== tmp.value) {
            newEnumList.push(tmp)
          }
        }
        thisObj.fileList = Object.assign([], newEnumList)
        record.parentValue = false
        this.$message.success(`${record.text} 文件删除成功.`)
      })
    },
    downloadUploadFile(record) {
      // 下载上传文件
      const url = '/autodeal/file/ctr/download/' + record.value
      request.download(url, {}, record.text)
      record.parentValue = false
    },
    handleFileDemoUpload(info) {
      if (info.file.status === 'uploading') {
        return
      }
      if (info.file.status === 'done') {
        // 上传处理结果数据在info.file.response变量获取
        this.$message.success(`${info.file.response.file.name} file uploaded successfully`)
        this.fileList = info.file.response.file.fileList
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    handleFileDemoRemove(file) {
      console.log('.....file....', file)
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    loadFormTreeData(record) {
      const _this = this
      let param = {}
      if (undefined !== record) {
        param = Object.assign({}, record)
      } else {
        param.key = '0'
      }
      const url = { S_PAGE_ID: '566f422cd47547e8b3e40644dd2024ab', S_PAGE_VER: 'v0.02' }
      param = Object.assign(param, url)
      return submitDealReq(param).then((res) => {
        if (res.data.success) {
          record.children = res.data.data
        } else {
          _this.$message.warning(res.data.message)
        }
      })
    }
  }
}
</script>
<style>
.div_text {
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
}
</style>
